<!--
 * @Author: zhangduo 445629906@qq.com
 * @Date: 2023-10-12 19:16:58
 * @LastEditors: 曹家睿 17799623735@163.com
 * @LastEditTime: 2024-03-19 11:40:33
 * @LastEditors: jingjingzheng 1742420988@qq.com
 * @LastEditTime: 2024-03-18 16:27:13
 * @LastEditors: zhangduo 445629906@qq.com
 * @LastEditTime: 2023-12-21 20:55:36
 * @FilePath: \mdbj-ui\src\views\onemap\topLeft.vue
 * @Description: 园林绿地一张图左上角面板，按国家标准的绿地五大类型统计绿地面积占比
 *
 * Copyright (c) 2023 by zhangduo, All Rights Reserved.
-->

<template>
  <div class="echart-dom">
    <div class="echart-title">
      <div class="titleborder">
        <div style="display: flex">
          <div class="divider"></div>
          <div class="tltle">米东区道路情况统计</div>
        </div>
        <span>
          <!-- 全屏图标按钮 -->
          <i
            class="el-icon-rank"
            style="
              font-size: 22px;
              transform: rotate(45deg);
              color: #fff;
              cursor: pointer;
              position: absolute;
              top: 5px;
              right: 10px;
              z-index: 5;
            "
            title="全屏"
            @click="fullSc()"
        /></span>
      </div>
    </div>
    <div id="domCart1" style="width: 100%; height: 100%"></div>
    <el-dialog
      title="米东区道路情况统计"
      :visible.sync="dialogVisible"
      :fullscreen="true"
      center
    >
      <div
        id="domCart11"
        ref="fullChart"
        :style="'width:100%;height:' + (screenHeight - 110) + 'px'"
      ></div>
    </el-dialog>
  </div>
</template>

<script>
import { getRoadClassStatisticsSum } from "../../api/statistics/road";
import { getDicts } from "../../api/system/dict/data";
import { EleResize } from "@/utils/esresize"; // 图表自适应
import * as echarts from "echarts";

export default {
  data() {
    return {
      option: {
        title: {
          left: "center",
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "vertical",
          left: "left",
        },
        series: [
          {
            type: "pie",
            radius: "60%",
            data: this.chartData,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
            label: {
              normal: {
                position: "outside",
                show: true,
                formatter: "{b}\n{c}",
              },
            },
          },
        ],
      },
      chartData: [],
      where: "",
      dialogVisible: false,
      screenHeight: window.innerHeight,
    };
  },
  // 监听screenHeight大小，从而改变全屏画图容器的大小
  watch: {
    screenHeight(val) {
      this.screenHeight = val;
    },
  },
  mounted() {
    let _self = this;
    _self.getData();
    // 获取浏览器窗口大小
    window.onresize = () => {
      return (() => {
        window.screenHeight = window.innerHeight;
        this.screenHeight = window.screenHeight;
      })();
    };
  },
  methods: {
    formatterLegend(name) {
      // 获取legend显示内容
      let data = this.chartData;
      let total = 0;
      let tarValue = 0;
      for (let i = 0, l = data.length; i < l; i++) {
        total += data[i].value;
        if (data[i].name == name) {
          tarValue = data[i].value;
        }
      }
      return name + " " + " " + tarValue;
    },
    async getData(params) {
      let _self = this;
      _self.chartData = [];
      // 利用字典方法获取道路等级中所有数据
      const dictRes = await getDicts("sys_roadclass_js");
      if (dictRes.code != 200 && dictRes.data.length == 0)
        return this.$message.error("字典获取失败，请联系管理员！");
      console.log(dictRes);
      // 获取数据
      const lengthRes = await getRoadClassStatisticsSum();
      if (lengthRes.code != 200 && lengthRes.data.length == 0)
        return this.$message.error("统计道路长度失败，请联系管理员！");
      // 利用 for 循环将将数组中的元素提取到 element中
      for (let index = 0; index < lengthRes.data.length; index++) {
        const element = lengthRes.data[index];
        // 使用 filter 方法，通过筛选 dictRes.data 数组，找到与当前道路分配匹配的字典数据
        const newDicts = dictRes.data.filter(
          (dictItem) => dictItem.dictValue === element.roadclass_js
        );
        _self.chartData.push({
          // 对于道路等级的的名称命名，如果找到匹配的字典数据，则使用字典中的标签 dictLabel，
          name:
            newDicts.length == 0
              ? element.roadclass_js
              : newDicts[0].dictLabel,
          value: element.length,
        });
      }
      _self.initChart1(document.getElementById("domCart1"));
    },
    initChart1(domCart1) {
      let _self = this;
      let myChart = echarts.init(domCart1);
      // 图表自适应
      const listener = function () {
        myChart.resize();
      };
      EleResize.on(domCart1, listener);
      let option = {
        tooltip: {
          trigger: "item",
          formatter: "{b} : {c} " + " 米 ",
        },
        legend: {
          left: "0",
          orient: "horizontal",
          itemWidth: 12,
          width: "100%",
          formatter: function (name) {
            //图例后添加数值
            let data = _self.chartData;
            let tarValue;
            for (let i = 0; i < data.length; i++) {
              if (data[i].name === name) {
                tarValue = data[i].value;
              }
            }
            return name + ": " + tarValue + "m";
          },
        },
        series: [
          {
            type: "pie",
            radius: "50%",
            data: _self.chartData,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
            label: {
              normal: {
                position: "outside",
                show: true,
              },
            },
          },
        ],
      };
      myChart.setOption(option);
    },
    // 点击全屏图标按钮弹框画图
    fullSc() {
      this.dialogVisible = true;
      this.$nextTick(() => {
        const chartFul = this.$refs.fullChart;
        if (chartFul) {
          this.initChart1(document.getElementById("domCart11")); // 画图
        }
      });
    },
    // 选择统计类型
    handleSelectChartType(val) {
      let _self = this;
      _self.chartType = val;
      this.getList(_self.chartType);
    },
  },
};
</script>

<style lang="scss" scoped>
#domCart1 {
  width: 100%;
  height: 100%;
  padding: 15px;
}

.echart-dom {
  //height: 32%;
  margin-bottom: 10px;
  height: 100%;
  width: 100%;
}

.echart-title {
  padding-bottom: 2px;
  //   padding-top: 2px;
  //margin-left: -6px;
  width: 100%;
  //   padding-left: 4px;
  height: 38px;
  font-size: 16px;
  font-family: Source Han Sans CN-Regular, Source Han Sans CN;
  font-weight: 400;
  color: #ffffff;
  line-height: 24px;
  display: flex;
  align-content: center;
  align-items: center;
}

.titleborder {
  padding-left: 16px;
  width: inherit;
  height: 38px;
  /* background: -webkit-gradient(linear, left top, right top, from(#008cce), to(#1b678b)); */
  /*background: linear-gradient(-90deg, #1890ff 0%, #1890ffc7 100%);*/
  background: linear-gradient(90deg, #3399cc 0%, #3399cc 100%);
  opacity: 1;
  display: flex;
}

.divider {
  width: 4px;
  height: 18px;
  background: #ffffff;
  opacity: 1;
  margin-top: 9px;
  margin-left: 8px;
}

.tltle {
  height: 24px;
  font-size: 16px;
  font-family: Source Han Sans CN-Regular, Source Han Sans CN;
  font-weight: 400;
  color: #ffffff;
  margin-top: 6px;
  margin-left: 8px;
}
</style>
